import React, { Component, createRef, forwardRef } from "react";

// ref还可以直接获取到子组件(只能获取类组件)的实例
// class Child extends Component {
//   state = {
//     count: 10,
//   };
//   fn = () => {
//     console.log("fn");
//   };
//   render() {
//     // console.log(this);
//     return <div>child子组件</div>;
//   }
// }

// 函数组件是没有实例的
// forwardRef是内置的高阶组件,就允许给函数组件添加ref属性了
// 并且里面的函数组件可以添加第二个参数ref了

// 依旧不能获取子组件实例，但是可以获取子组件的某一个dom节点
const Child = forwardRef((props, ref) => {
  return <div ref={ref}>child子组件</div>;
});

// const Child2 = forwardRef(Child);

class App extends Component {
  child = createRef();
  state = {};
  render() {
    return (
      <>
        <h2>ref获取组件实例</h2>
        <Child ref={this.child} />
      </>
    );
  }
  componentDidMount() {
    console.log(this.child.current);
    // this.child.current.fn();
  }
}

export default App;
